import React, { useState } from 'react';
import { Button } from 'antd';
import { connect, Dispatch } from 'umi';
import { ConnectState } from '@/models/connect';
import { StateType } from '@/models/example';


export interface Example1Props extends StateType {
  dispatch: Dispatch;
}

const Example1: React.FC<Example1Props> = (props) => {
  const {
    dispatch,
    count,
  } = props;


  const addCount = (): void => {
    const payload: number = (count || 0) + 1;
    if (dispatch) {
      dispatch({
        type: 'example/addCount',
        payload,
      })
    }
  }

  const handleRequest = (): void => {
    if (dispatch) {
      dispatch({
        type: 'example/fetchData',
      })
    }
  }

  return (
    <div>
      {count}
      <Button onClick={addCount}>加1</Button>
      <Button onClick={handleRequest}>发个请求</Button>
    </div>
  )
}

export default connect(({ example }: ConnectState) => ({
  count: example.count,
}))(Example1)